<template>
  <view class="mine-container" :style="{height: `${windowHeight}px`}">
	 <!-- <cu-custom bgColor="#3C96F3" style="background-color: #3C96F3;" :isBack="false">
	      <block slot="backText">返回</block>
	      <block slot="content">我的</block>
	  </cu-custom> -->
    <!--顶部个人信息栏-->
    <view class="header-section">
		<view class="avatar margin-top-lg">
			<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="logoimg" mode="widthFix"></image>
			<image v-if="!avatar" @click="handleToAvatar" src="@/static/images/user.webp" class="logoimg" mode="widthFix"></image>
		</view>
		<view v-if="!name" @click="handleToLogin" class="padding text-center margin-top-lg">
		  <text class="text-lg text-grey">未登录，点击登录</text>
		</view>
		
		<view class="padding" v-if="name">
			<view class="text-center" @click="handleToInfo" v-model="user">
				<!-- <text class="text-xxl text-grey">Hello， {{nickName}}</text> -->
				<text class="text-xxl text-grey">Hello， {{user.nickName}}</text>
			</view>
			<view class="text-center padding">
				<text class="text-xl text-gray" >欢迎回来，感谢使用！</text>
			</view>
		</view>
		<view class="profile-rule padding text-center">
			<!-- <uni-icons type="contact" size="20" color="#fff"></uni-icons> -->
			<text class="text-xxl">{{title}}</text>
		</view>
		
    </view>
	<!--  -->
	<view class="bg-white">
		<uni-grid :column="3" :show-border="false">
			<uni-grid-item>
				<view class="padding text-center margin-top-lg">
					<view class="" @click="handleToEditInfo">
						<view class="text-center">
							<uni-icons type="person-filled" size="30" color="#3C96F3"></uni-icons>
						</view>
						<text class="text-center">个人资料</text>
					</view>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="padding text-center margin-top-lg">
					<view class="" @click="handleToEditPassword">
						<view class="text-center">
							<uni-icons type="locked-filled" size="30" color="#3C96F3"></uni-icons>
						</view>
						<text class="text-center">修改密码</text>
					</view>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="padding text-center margin-top-lg">
					<view class="" @click="handleToSetting" >
						<view class="text-center">
							<uni-icons type="gear-filled" size="30" color="#3C96F3"></uni-icons>
						</view>
						<text class="text-center">设置</text>
					</view>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
	
	<!-- 退出按钮 -->
	<!-- <view class="padding bg-white" v-show="name">
		<uni-grid :column="2" :show-border="false" >
			<uni-grid-item style="height: 150rpx;">
				<view class="padding">
					<button class="bg-white text-black">
						<uni-icons type="phone-filled"></uni-icons>
						<text class="text-sm">联系我们</text>
					</button>
				</view>
			</uni-grid-item>
			<uni-grid-item style="height: 150rpx;">
				<view class="padding">
					<button class="bg-red" @click="handleLogout">
						<uni-icons type="closeempty" color="#fff" ></uni-icons>
						<text class="text-sm">退出登录</text>
					</button>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view> -->
	
  </view>
</template>

<script>
  import storage from '@/utils/storage'
  import { getUserProfile } from "@/api/system/user"
  
  export default {
    data() {
      return {
		title:getApp().globalData.config.appInfo.name,
        name: this.$store.state.user.name,
		nickName:this.$store.state.user.nickName,
        // version: getApp().globalData.config.appInfo.version
		user:{
			nickName:''
		}
      }
    },
	onLoad(){
		
	},
	onShow() {
		
	},
	created(){
		// this.nickName = this.$store.state.user.nickName
		// console.log(this.$store.state.user.nickName)
		this.getUserInfo()
	},
    computed: {
      avatar() {
        return this.$store.state.user.avatar
      },
	  
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      }
    },
	
    methods: {
	  getUserInfo(){
			getUserProfile().then(response=>{
				this.user = response.data
			})
	  },
	  // 个人信息
      handleToInfo() {
        this.$tab.navigateTo('/pages/mine/info/info')
		console.log("个人信息")
      },
	  // 编辑个人资料
      handleToEditInfo() {
        this.$tab.navigateTo('/pages/mine/info/edit')
      },
	  // 修改密码
	  handleToEditPassword() {
	    this.$tab.navigateTo('/pages/mine/password/password')
	  },
	  // 设置
      handleToSetting() {
        this.$tab.navigateTo('/pages/mine/setting/setting')
      },
	  // 登录页面
      handleToLogin() {
        this.$tab.reLaunch('/pages/login/login')
      },
	  //头像
      handleToAvatar() {
        this.$tab.navigateTo('/pages/mine/avatar/avatar')
      },
	  //退出
      handleLogout() {
        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
          this.$store.dispatch('LogOut').then(() => {
            this.$tab.reLaunch('/pages/index/index')
          })
        })
      },
      handleHelp() {
        this.$tab.navigateTo('/pages/mine/help/index')
      },
      handleAbout() {
        this.$tab.navigateTo('/pages/mine/about/index')
      },
      handleJiaoLiuQun() {
        this.$modal.showToast('QQ群：①133713780、②146013835')
      },
      handleBuilding() {
        this.$modal.showToast('模块建设中~')
      }
    }
  }
</script>

<style lang="scss">
  // page {
  //   background-color: #000;
  // }
  .profile-rule {
    height: 140rpx;
    line-height: 140rpx;
    padding: 0px 40rpx;
    background-color:#000;
    border-radius: 16px 16px 0 0;
    box-shadow: 1px 16px 26px rgba(0, 0, 0, .8);
  }
.avatar {
 //    margin-left: 25%;
 //    margin-right: 40%;
	// margin-top: 10%;
    display: flex;
    /*盒子模型*/
    flex-direction: row;
    /*横向*/
    justify-content: space-around;
    /*主轴居中*/
    // align-items: center;
    /*纵轴居中*/
	
  }
  
  .logoimg {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50px;
    // background: #000;
    // border: 1px solid #fff;
    border-width: 5px 5px 5px 5px;
    box-shadow: 1px 1px 5px #333;
    -webkit-box-shadow: 1px 1px 5px #333;
    -moz-box-shadow: 1px 1px 5px #333;
	background-color: #1494dc;
  }
  
  .mine-container {
    width: 100%;
    height: 100%;
	// background-color: #F5F6F7;
    .header-section {
      padding: 15px 15px 0px 15px;
      // background-color: #F5F6F7;
      color: white;
      }
  }
</style>
